<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head xml:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>学生信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <!-- <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>-->
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/list.js"></script>

    <!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
            <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>-->
    <!--    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">-->
    <!--    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>-->
    <style>
        .title{
            margin-top: 30px;
            margin-left: 20px;
        }
        .chaxun{
            display: grid;
            grid-template-columns: 500px auto 50px auto 300px;
        }
        .all{
            margin-left: 40px;
            margin-right: 40px;
            margin-top: 40px;
        }
        .anniu{
            background: #357bb7;
            width: 90px;
            color: rgb(255,255,255);
            font-weight: bold;
            margin-left: 10px;
        }
        .text{
            padding-left: 10px;
        }
        th{
            text-align: center;
        }
        td{
            text-align: center;
        }
    </style>
    <!--<link rel="stylesheet" href="/plugins/bootstraptable/dist/bootstrap-table.min.css">
    <script src="/plugins/bootstraptable/dist/bootstrap-table.min.js"></script>
    <script src="/plugins/bootstraptable/dist/locale/bootstrap-table-zh-CN.min.js"></script>-->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>

    <!--<link rel="stylesheet" href="/plugins/bootstracptable/dist/bootstrap-table.min.css">-->
    <!--<script src="/plugins/bootstracptable/dist/bootstrap-table.min.js"></script>
    <script src="/plugins/bootstracptable/dist/locale/bootstrap-table-zh-CN.js"></script>-->
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table-locale-all.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>


</head>
<body>

<!--<div class="title">
    <h1>学生信息管理系统</h1>
</div>-->
<div>
    <div class="title">
        <h3>你好！</h3>
        <span style="font-size: large; margin-left: 10px" th:text= "${session.username}"></span>
    </div>
    <form  method="post" class="form-inline chaxun">
        <div></div>
        <!--<input type="text" class="form-control" id = "name" name="name" placeholder="请输入姓名">
        <div></div>
        <div> <button type="submit" class="btn btn-default bg-primary anniu " onclick="return search();" >查询</button>
            <button type="submit" class="btn btn-default bg-primary anniu " onclick="return goback();" >返回</button>-->

        <input type="text" class="form-control" id="searchmessage" placeholder="姓名、成绩、性别",name="name">
        <div></div>
        <div>
            <button type="button" class="btn btn-default btn-primary anniu" onclick="search();">查询</button>
            <button type="submit" class="btn btn-default bg-primary anniu " onclick="goback();" >返回</button>
            <button type="button" class="btn btn-default btn-primary  anniu " data-toggle="modal" data-target="#myModal" onclick="preadd();">新增</button></div>

        <div></div>
    </form>

    <div class="modal fade" tabindex="-1" role="dialog" id="ExitModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body" >
                    <form action="logout">
                        <form class="form-group">
                            <label class="control-label" style="font-size: 22px;text-align: center">确认要退出吗？</label>
                        </form>
                    </form>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-default" th:href="@{/logout}" >确认</a>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>
<!-- Button trigger modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">

                <form id="formstudent">
                    <div class="form-group">
                        <label for="name1">姓名</label>
                        <input type="text" class="form-control" id="name1" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="num1">学号</label>
                        <input type="text" class="form-control" id="num1" name="num" placeholder="学号">
                    </div>
                    <div class="form-group">
                        <label for="sex1">性别</label>
                        <select class="form-control" id="sex1" name="sex" >
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="score1">成绩</label>
                        <input type="text" class="form-control" id="score1" name="score" placeholder="成绩">
                    </div>
                </form>
                <!--表单结束-->
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" onclick="savestudent();">保存信息</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">

                <form id="formstudent1">

                    <input hidden="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label for="name2">姓名</label>
                        <input type="text" class="form-control" id="name2" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="num2">学号</label>
                        <input type="text" class="form-control" id="num2" name="num" placeholder="学号">
                    </div>
                    <div class="form-group">
                        <label for="sex2">性别</label>
                        <select class="form-control" id="sex2" name="sex" >
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="score2">成绩</label>
                        <input type="text" class="form-control" id="score2" name="score" placeholder="成绩">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="savestudent();">保存信息</button>
            </div>
        </div><!--&lt;!&ndash; &lt;!&ndash;/.modal-content &ndash;&gt;&ndash;&gt;-->
    </div><!--&lt;!&ndash; &lt;!&ndash;/.modal-dialog &ndash;&gt;&ndash;&gt;-->
</div>

<div class="container-fluid all" >
    <table class="table table-bordered table-hover table-striped"
           data-detail-view="true"
           data-click-to-select="true"
           data-minimum-count-columns="2"
           data-pagination="true"
           data-id-field="id"
           data-show-footer="true"
           data-side-pagination="server"
           data-detail-formatter="detailFormatter"
           id="stuTable1">
        <!--data-response-handler="responseHandler"-->
    </table>
    <button type="button" class="btn btn-default button" style="margin-left: 92%; font-weight: bolder; border-radius: 4px; background-color:#ebebeb" data-toggle="modal" data-target="#ExitModal" >退出登录</button>
</div>
<!--<div class="title">
    <h1>查询信息如下：</h1>
</div>
<div class="container-fluid all" >
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="bg-primary">
            <th>#</th>
            <th>姓名</th>
            <th>学号</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr data-th-each="student : ${data1}" class="active">
             <th scope="row"  data-th-text="${student.id}">1</th>
             <td  data-th-text="${student.name}">Mark</td>
             <td  data-th-text="${student.num}">Mark</td>
             <td data-th-text="${student.sex}">Otto</td>
             <td th:text="${student.score}">@mdo</td>
         </tr>
        </tbody>
    </table>
</div>-->
<script>
    $(function (){
        studentTable();
    })
</script>




</body>
</html>